import React,{useEffect, useState} from 'react'
import './Order.less'
import {SwapOutlined,FunnelPlotOutlined,SearchOutlined,ArrowUpOutlined,RedoOutlined,BugOutlined,ArrowDownOutlined,PushpinOutlined} from '@ant-design/icons'
import {Button,Radio,Select,Form, Table,Checkbox, Input,Pagination,Image,message } from 'antd'
// import store from '../../store/store'
import img from '../../img/1.png'
import {Link} from "react-router-dom";
import Foot from '../../components/foot/Foot'
import Item from 'antd/lib/list/Item'
import http from '../../utils/http'
import {useNavigate} from 'react-router-dom'
const {Option}=Select

const Order=()=>{
  const navigate=useNavigate()
    // 表头
    const columns = [
      {
        title: '编号',
        dataIndex: 'oid',
        key: 'oid',
        align:'center',
        width:'60px',
      },
        {
          title: '系统订单号',
          dataIndex: 'orderId',
          key: 'orderId',
          align:'center',
          width:'100px',
        },
        {
          title: '下单时间',
          dataIndex: 'orderTime',
          key: 'orderTime',
          align:'center',
          ellipsis:true,
          width:'100px'
        },
        {
          title: '买家id/名称',
          dataIndex: 'uidName',
          key: 'uidName',
          align:'center',
          width:'100px'
        },
        {
            title: '商品图片',
            dataIndex: 'skuImg',
            key: 'skuImg',
            align:'center',
            width:'80px',
            render: (img, record)=>
              // console.log(record.img);
            <Image src={record.skuImg} style={{width:'50px',height:'50px'}}/>
          },
          {
            title: '商品标题',
            dataIndex: 'goodsName',
            key: 'goodsName',
            align:'center',
            width:'80px'
          },
          {
            title: '商品件数',
            dataIndex: 'num',
            key: 'num',
            align:'center',
            width:'80px'
          },
          {
            title: '实付金额',
            dataIndex: 'pay',
            key: 'pay',
            align:'center',
            width:'80px'
          }, 
          {
            title: '预估收益',
            dataIndex: 'skuStock',
            key: 'skuStock',
            align:'center',
            width:'80px'
          },
          {
            title: '系统状态',
            dataIndex: 'systemStatus',
            key: 'systemStatus',
            align:'center',
            width:'80px',
            render:(text,record)=><div>
            <span>{record.systemStatus==1?'待发货':record.systemStatus==2?'待收货':record.systemStatus==3?'已完成':'已失效'}</span>
          </div>
          },
          {
            title: '结算状态',
            dataIndex: 'moneyStatus',
            key: 'moneyStatus',
            align:'center',
            width:'80px',
            render:(text,record)=><div>
              <span>{record.moneyStatus==1?'已结算':'待结算'}</span>
            </div>
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align:'center',
            render: (text,record)=><div>
              <Link to={"/home/order/orderdat"} >
                <Button type="primary"  style={{backgroundColor:'rgb(23,28,78)',borderStyle:'none',marginRight:'5px'}} onClick={()=>(xg(record))}>详情/编辑</Button>
              </Link>
                <Button type="primary" style={{backgroundColor:'rgb(245,108,108)',borderStyle:'none',marginLeft:'5px'}} onClick={()=>(shixiao(record))}>订单失效</Button>
            </div>
            
          },
      ];
     //设置分页器默认值
    const [dangqianye,setDq]=useState(1)
    const [pageSize]=useState(3)
    // 进入请求数据
    useEffect(()=>{
       http({
          url:'api/order/findOrder',
          method:'GET',
          params:{
          page:dangqianye,
          size:pageSize
           }
          }).then((res)=>{
            console.log(res);
            setData(res.data.list)
            settoal(res.data.total)
            
            })
          },[dangqianye])
     //失效操作
     const shixiao=(record)=>{
      message.success('操作成功！！');
       http({
         url:'api/order/deleteOrder',
         params:{
          id:record.oid
        }
       }).then(res=>{
        http({
          url:'api/order/findOrder',
          method:'GET',
          params:{
          page:dangqianye,
          size:pageSize
           }
          }).then((res)=>{
            console.log(res);
            setData(res.data.list)
            settoal(res.data.total)
            
            })
       })
     }
      // 头部div操作
      const [count, setCount] = useState(1);
      const [height, setHeight] = useState(true);
      const countChange = function (a) {
        setCount(a)
      }
      let close=()=>{
      setHeight(!height);
      }

      //搜索框初始值
      const [searchVal,setSearchVal]=useState('')
      //总条数
      const [total,settoal]=useState(0)
      //表格数据
      const [data2,setData]=useState([])
      const [selJsuan,setSeljsuan]=useState('')
      const [selOrd,setSelOrd]=useState('')
      const selJs=(value)=>{
        setSeljsuan(value)
      }
      const selOrder=(value)=>{
        setSelOrd(value)
      }
      //搜索操作
      const search=()=>{
        http({
          url:'api/order/findOrder',
          method:'GET',
          params:{
            page:dangqianye,
            size:pageSize,
            moneyStatus:selJsuan,
            systemStatus:selOrd,
            name:searchVal
          }
        }).then((res)=>{
          if (res.code==200) {
            setData(res.data.list)
            settoal(res.data.total)
            console.log(res);
          }else{
            message.success('无数据');
            navigate('/home/order')
          }

        })
      }
      // 重置
     const reset=()=>{
      setSeljsuan('')
      setSelOrd('')
      setSearchVal('')
      http({
        url:'api/order/findOrder',
        method:'GET',
        params:{
        page:dangqianye,
        size:pageSize
         }
        }).then((res)=>{
          setData(res.data.list)
          settoal(res.data.total)
          })
      }
    //   行操作
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        setIds(selectedRowKeys)
        setLength(selectedRowKeys.length)
      },
      onSelect: (record, selected, selectedRows) => {
        // console.log(record, selected, selectedRows);
        // console.log(selected);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        // console.log(selected, selectedRows, changeRows);
       
      },
      onRow:(record, index)=>{

      }
    };
    //行id值
    const [ids,setIds]=useState([]);
    //行选择条数
    const [rowLength,setLength]=useState(0)
    //单选按钮操作
    const [radido, setValue] =useState(0)
    const gbian=(e)=>{
      setValue(e.target.value)
      }
          //  详情操作
     const xg=(record)=>{
      console.log(record);
     sessionStorage.setItem('imgAddress',record.skuImg)
           http({
             url:'api/order/more',
             method:'GET',
             params:{
               id:record.oid
             }
           }).then((res)=>{
             if (res.code==3009) {
               message.info('数据库没有用户地址');
               navigate('/home/order')
             }else{
               sessionStorage.setItem('rowdata',JSON.stringify(res))
             }
             
           })
    }
    const Export=()=>{
      fetch('api/order/downloadExcel',{
        method:'post',
        headers:{
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({
          page:dangqianye,
          size:pageSize,
          choose:radido,
          ids:ids
        })
      }).then(res => res.blob()).then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(new Blob([blob], { type: "application/vnd.ms-excel" }));
        a.href = url;
        a.download = "订单数据";  //定义导出的文件名
        a.click();
        window.URL.revokeObjectURL(url);
      })
    }

    return (
        <div className="topnav">
            <div className="top" >
                {/* 李悦 */}
            <div className='handle' style={{height:height ? '140px' :'0px'}}>
              <div className='topleft' style={{marginLeft:'2%'}}>
               <div className="icons-list">
                <div className='form'>
                  <SwapOutlined className='icon' rotate={90}/>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>排序</span>
                  <Button style={{fontSize:'12px'}} type={count === 1 ? 'primary' : 'text'} shape="round" size='small' className='bt'
                          onClick={() => {
                            countChange(1)
                          }
                          }>
                    默认排序
                  </Button>
                  <Button style={{fontSize:'12px'}} type={count === 2 ? 'primary' : 'text'} shape="round" size='small' className='bt'
                          onClick={() => {
                            countChange(2)
                          }
                          }>
                    在售最低价<ArrowDownOutlined/>
                  </Button>
                  <Button style={{fontSize:'12px'}} type={count === 3 ? 'primary' : 'text'} shape="round" size='small' className='bt'
                          onClick={() => {
                            countChange(3)
                          }
                          }>
                    月销量最高<ArrowDownOutlined/>
                  </Button>
                </div>
                <div className='form'>
                  <PushpinOutlined className='icon'/>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>筛选</span>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>商品分类：</span>
                    <Select style={{width:'150px'}}  placeholder="请选择结算状态" onChange={selJs} value={selJsuan} >
                        <Select.Option value="1">已结算</Select.Option>
                        <Select.Option value="0">未结算</Select.Option>
                    </Select>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>订单状态：</span>
                  <Select style={{width:'150px'}}  placeholder="请选择订单状态" onChange={selOrder} value={selOrd}>
                        <Select.Option value="1">待发货</Select.Option>
                        <Select.Option value="2">待收货</Select.Option>
                        <Select.Option value="3">已完成</Select.Option>
                        <Select.Option value="5">已失效</Select.Option>
                    </Select>
                </div>
                <div className='form'>
                  <SearchOutlined className='icon'/>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>搜索</span>
                  <span style={{marginLeft: '20px',fontWeight:'bold'}}>精准搜索：</span>
                  <Input placeholder="商品名称" style={{width: 250}}  placeholder="请输入订单ID或买家信息" value={searchVal} onChange={(e)=>{
                    setSearchVal(e.target.value)
                  }}/>
                </div>
              </div>
            </div>
            <div className='topright' style={{marginRight:'5%'}}>
              <div className='echarts'>

              </div>
              <div className='echarts'>

              </div>
            </div>
          </div>
            <div className='bottom' style={{padding:'5px 20px'}}>
              <Button
                  type="primary"
                  icon={height ? <ArrowUpOutlined/>:<ArrowDownOutlined />}
                  style={{backgroundColor:'#171c49',fontSize:'12px',fontWeight:'bold'}}
                  className='bottomBtn'
                  onClick={close}
            >
                {height?"收起":"展开"}
              </Button>
              <Button type="primary" icon={<RedoOutlined />} style={{backgroundColor:'#ffc306',fontSize:'12px',fontWeight:'bold'}}  className='bottomBtn' onClick={reset}>
                重置
              </Button>
              <Button  style={{fontSize:'12px',fontWeight:'bold'}} type="primary" icon={<SearchOutlined/>} onClick={search} >
                搜索
              </Button>
              <input type="text" placeholder='请输入商品名称' className='input' style={{display:height?'none':'inline'}}/>
            </div>
            </div>
            
            {/* 表格 */}
            <div className="Cbody">
            <Table size='middle'
                    pagination={false}
                    columns={columns}
                    rowKey={record=>record.oid}
                    rowSelection={rowSelection}
                    // dataSource={data1.splice((dangqianye-1)*pageSize,(dangqianye-1)*pageSize+pageSize)}
                    dataSource={data2.length==0?'':data2}
                    >
                </Table>                
                </div>
            {/* 底部 */}
            <div className="foot">
                <div className="foot1">
                    <div style={{width:'60%',fontWeight:'bold'}}>
                        <Radio.Group  onChange={gbian}  value={radido} >
                           <Radio  value={0} >今日入库</Radio>
                          <Radio value={1}>当前页面</Radio>
                          <Radio value={2}>筛选结果</Radio>
                          <Radio value={3}>所有订单</Radio>
                        </Radio.Group>
                    </div>
                    <div style={{width:'30%',fontSize:'16px',fontWeight:'bold'}}>已选中  {rowLength}  件，共 {total} 条数据</div>
                </div>
                <div className="foot2">
                    <Button type="primary" size="large" style={{backgroundColor:'rgb(24,144,255)',borderStyle:'none',fontWeight:'bold'}} onClick={Export}>一键导出</Button>
                    <Pagination  total={total} pageSize={pageSize} onChange={function(page, pageSize){
                      setDq(page)
                    }} defaultPageSize={3} current={dangqianye}/>
                </div>
            </div>
            {/* <Foot/> */}
        </div> 
    )
}
export default Order;